<!--  -->
<template>
  <div class="app-container">
    <el-form :model="form" label-width="100px">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="组件图片">
            <el-input v-model="form.thumb">
              <el-button slot="append" icon="el-icon-search" @click="()=>{
                fileUploadDialog=true;
                let t=this;
                fileResult=function(e){
                  t.form.thumb=e[0]
                }
              }">选择图片</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="组件名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="组件变量">
            <el-input v-model="form.variable"></el-input>
            <p style=" margin: 0; line-height: normal; color: red; font-size: smaller; ">注:不能与现有重复,格式:必须母子或数字,字母开头,不分大小写,不能包含特殊字符,"_"除外</p>
          </el-form-item>
          <el-form-item label="组件介绍">
            <el-input type="textarea" v-model="form.body"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleComponent()">立即创建</el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
          </el-form-item>
          <div class="form-thumb-div">
            <img v-if="form.thumb" :src="form.thumb" />
          </div>
        </el-col>
        <el-col :span="16">
          <el-button type="primary" icon="el-icon-plus" circle @click="handleClick"></el-button>
          <el-table :data="form.list" row-key="id" border fit highlight-current-row style="width: 100%">
            <el-table-column align="center" label="排序" width="65">
              <template slot-scope="scope">
                <span>{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="参数名称" width="300">
              <template slot-scope="scope">
                <span>{{ scope.row.text }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="参数变量" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.variable }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="参数类型" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.type }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="handleUpdate(scope.row,edit)"></el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <file-upload :show.sync="fileUploadDialog"  :result="fileResult"></file-upload>
    <el-dialog title="添加属性" :visible.sync="dialogVisible" width="50%">
      <el-form :model="dialogForm" label-width="100px">
        <el-form-item label="排序">
          <el-input type="number" v-model="dialogForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="变量说明">
          <el-input v-model="dialogForm.text"></el-input>
        </el-form-item>
        <el-form-item label="变量名称">
          <el-input v-model="dialogForm.variable"></el-input>
          <p style=" margin: 0; line-height: normal; color: red; font-size: smaller; ">注:不能与现有重复,格式:必须母子或数字,字母开头,不分大小写,不能包含特殊字符,"_"除外</p>
        </el-form-item>
        <el-form-item label="数据类型">
          <el-select v-model="dialogForm.type" style="width:300px;" placeholder="请选择">
            <el-option v-for="item in ParameterType" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="dialogForm.type==='ARRAY'">
          <el-button type="primary" icon="el-icon-plus" circle @click="handleDialogAddBtn"></el-button>
          <el-table :data="dialogForm.child" ref="demoTable" row-key="id" border fit highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
            <el-table-column align="center" label="排序" width="95">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sort" type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="参数名称" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.text" placeholder="请输入参数名称"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="参数变量" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.variable" placeholder="请输入参数变量"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="参数类型" width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type" placeholder="请选择">
                  <el-option v-for="item in ParameterType" v-if="item.value!=='ARRAY'" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="$delete(dialogForm.child,scope.$index)"></el-button>
                <el-button v-if="scope.row.type=='SELECT'" @click="childForm=scope.row;childDialog=true;" size="mini" type="success" icon="el-icon-plus" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item v-show="dialogForm.type==='SELECT'">
          <el-button type="primary" icon="el-icon-plus" circle @click="handleAddBtn(dialogForm.child)"></el-button>
          <el-table :data="dialogForm.child" ref="demoTable" row-key="id" border fit highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
            <el-table-column align="center" label="参数名称" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.text" placeholder="请输入参数名称"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="参数变量" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value" placeholder="请输入参数变量"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="()=>{
                             $delete(dialogForm.child,scope.$index)
                           }"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleParameter">立即创建</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="子属性" :visible.sync="childDialog" width="45%">
      <p>注:自定义下拉框/事件 可根据业务需要,自行定义</p>
      <el-button type="primary" icon="el-icon-plus" circle
                 @click="()=>{if(!childForm.child){childForm.child=[];}
                 $set(childForm.child,childForm.child.length,{sort:childForm.child.length});
                 $set(childForm,'update',new Date().getTime());
                 }"></el-button>
      <el-table :data="childForm.child"  row-key="id" border fit highlight-current-row  style="width: 100%">
        <el-table-column align="center" label="排序" width="95">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" type="number"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="参数名称" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.text" placeholder="请输入参数名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="参数变量" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.value" placeholder="请输入参数变量"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" icon="el-icon-delete" circle
                       @click="$delete(childForm.child,scope.$index)"></el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>


  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload'
export default {
  components: { FileUpload },
  data () {
    return {
      ParameterType: [
        { label: '字符串', value: 'STRING' },
        { label: '图片', value: 'IMAGE' },
        { label: '颜色', value: 'COLOR' },
        { label: '链接', value: 'URL' },
        { label: '单选', value: 'BOOLEAN' },
        { label: '数字', value: 'NUMBER' },
        { label: '列表', value: 'ARRAY' },
        { label: '下拉框', value: 'SELECT' },
        { label: '富文本', value: 'RICH' },
        { label: '自定义接口', value: 'CUSTOMIZE' }
      ],
      fileUploadDialog: false,
      form: { list: [] },
      dialogVisible: false,
      childDialog:false,
      dialogForm: {},
      childForm:[],
      currentRow: null
    }
  },
  methods: {
    initDetail () {
      if (this.$route.query.id) {
        this.$api.get('/api/design/module/'+this.$route.query.id).then(res=>{
          this.form=res.data;
        })
      }
    },
    fileResult (data) {
      this.$set(this.form, 'thumb', data[0].src)
    },
    handleDialogAddBtn () {
      const d = {}
      if (this.dialogForm.child == null) {
        this.dialogForm.child = []
      }
      this.$set(this.dialogForm.child, this.dialogForm.child.length, d)
      this.$set(this.dialogForm, 't', Math.random())
      this.$refs.demoTable.setCurrentRow(d)
    },
    handleAddBtn (child) {
      if (child == null) {
        child = []
      }
      this.$set(child, child.length, {})
    },
    handleClick () {
      if(!this.form.list)this.form.list=[]
      this.dialogVisible = true
      this.dialogForm = { child: [], sort: this.form.list.length }
    },
    handleCurrentChange (val) {
      this.currentRow = val
    },
    /**
     * 参数添加按钮事件
     */
    handleParameter () {
      if(!this.form.list) this.form.list=[];
      if (this.dialogForm.update !== true) {
        this.$set(this.form.list, this.form.list.length, this.dialogForm)
      }
      this.form.list.sort(function (a,b){
        return a.sort-b.sort
      })
      this.dialogVisible = false
    },
    /**
     * 编辑参数事件
     */
    handleUpdate (data, update) {
      this.dialogVisible = true
      data['update'] = true
      this.dialogForm = data
    },
    /**
     * 删除参数事件
     */
    handleDelete (data) { },
    handleComponent () {
      if(!this.form.thumb||this.form.thumb===''||!this.form.thumb.startsWith('http')){
        this.$api.message('必须上传图片')
        return;
      }
      this.$api.put('/api/design/module',{},this.form).then(response => {
        if (response.code === 200) {
          this.$router.go(-1)
        }
      })
    }
  },
  created () {
    this.initDetail()
  },
  mounted () { }
}
</script>
<style lang='scss' scoped>
.form-thumb-div {
  width: 100%;
  height: 100px;
}
</style>
